<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name='viewport' content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'>
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>移动端搜索页practice01</title>
  <link rel="icon" href="./favicon.ico">
  <link rel="stylesheet" href="./lib/fa/css/font-awesome.css">
  <link rel="stylesheet" href="./lib/mui/css/mui.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/search.css">
</head>
<body>
  <div class="lt_container">
    <div class="lt_header">
      <a class="icon_left fa fa-home" href="index.html"></a>
      <span>搜索中心</span>
      <a class="icon_right fa fa-search" href="search.html"></a>
    </div>
    <div class="lt_main">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
              <!--这里放置真实显示的DOM内容-->
              <div class="lt_search">
                  <input type="text" placeholder="请输入搜索关键字">
                  <button class="btn-search mui-btn mui-btn-primary">搜索</button>
              </div>
              
              <div class="lt_history">
                  <!-- 待加载 -->
              </div>
            </div>
          </div>
    </div>
    
    <div class="lt_footer">
      <ul>
            <li><a href="index.html"><span class="fa fa-home"></span><p>首页</p></a></li>
            <li><a href="category.html"><span class="fa fa-home"></span><p>分类</p></a></li>
            <li><a href="cart.html"><span class="fa fa-shopping-cart"></span><p>购物车</p></a></li>
            <li><a href="user.html"><span class="fa fa-user"></span><p>会员中心</p></a></li>
      </ul>
     </div>
  </div>
   
  
  <script type="text/template" id="tmp">
    {{if list.length===0}}
    <p>暂无搜索历史记录</p>
    {{else}}
    <div class="lt_item mui-clearfix">
      <div class="left mui-pull-left">搜索历史</div>
      <div class="btn_empty right mui-pull-right fa fa-trash">清空记录</div>
    </div>
    <div class="lt_content">
      <ul class="mui-clearfix">
          {{each list v i}}
            <li>
              <a class="mui-pull-left" href="#">{{v}}</a>
              <span data-id={{i}} class="btn_delete mui-pull-right mui-icon mui-icon-closeempty"></span>
            </li>
          {{/each}}
      </ul>
      </div>
    {{/if}}
  </script>
      


  <script src="./lib/zepto/zepto.min.js"></script>
  <script src="./lib/mui/js/mui.js"></script>
  <script src="./lib/artTemplate/template-web.js"></script>
  <script src="./js/common.js"></script>
  <script src="./js/search.js"></script>
</body>
</html>